<template>
    <div class="cm-video-box" @click="handlerClick">
        <img :src="img" alt="">
        <div class="video-icon-box">
            <div class="icon"></div>
            <div class="time">{{duration || 0 | timeInit}}</div>
        </div>
        <!-- <video src="https://avideo.shike.com/original/2d05e5cabba24897a5e351671d3b5b78/54d49ad6-16eb164c32d.mov"></video> -->
    </div>
</template>

<script>
export default {
    name: 'videoBox',
    data () {
        return {
            duration: ''
        }
    },
    props: ['img', 'time', 'url', 'title'],
    created () {
        this.duration = this.time
    },
    watch: {
        time (val) {
            this.duration = val
        }
    },
    methods: {
        handlerClick () {
            if (this.url) {
                this.$store.commit('changeShowVideoBox', {
                    url: this.url,
                    title: this.title
                })
            }
        }
    },
    filters: {
        timeInit (val) {
            if (val) {
                let secondTime = parseInt(val)// 秒
                let minuteTime = 0// 分
                let hourTime = 0// 小时
                if (secondTime >= 60) { // 如果秒数大于60，将秒数转换成整数
                    // 获取分钟，除以60取整数，得到整数分钟
                    minuteTime = parseInt(secondTime / 60)
                    // 获取秒数，秒数取佘，得到整数秒数
                    secondTime = parseInt(secondTime % 60)
                    // 如果分钟大于60，将分钟转换成小时
                    if (minuteTime > 60) {
                        // 获取小时，获取分钟除以60，得到整数小时
                        hourTime = parseInt(minuteTime / 60)
                        // 获取小时后取佘的分，获取分钟除以60取佘的分
                        minuteTime = parseInt(minuteTime % 60)
                    }
                }
                secondTime = (secondTime + '').padStart(2, '0')
                let result = secondTime
                if (minuteTime >= 0) {
                    minuteTime = (minuteTime + '').padStart(2, '0')
                    result = minuteTime + ':' + result
                }
                if (hourTime > 0) {
                    result = parseInt(hourTime) + ':' + result
                }
                return result
            } else {
                return '--:--'
            }
        }
    }
}
</script>

<style lang="scss">
    .cm-video-box {
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
        width: 160px;
        height: 80px;
        border-radius: 6px;
        overflow: hidden;
        background-color: #ddd;
        cursor: pointer;
        > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .video-icon-box {
            position: absolute;
            top: 20px;
            left: 50%;
            width: 100px;
            transform: translateX(-50%);
            z-index: 1;
            .icon {
                margin: 0 auto;
                width: 24px;
                height: 24px;
                background-image: url('./img/video.png');
                background-size: 100% 100%;
            }
            .time {
                text-align: center;
                margin-top: 3px;
                font-size:12px;
                font-family:Roboto-Regular,Roboto;
                font-weight:400;
                color:rgba(255,255,255,1);
            }
        }
    }
</style>
